<!--
 * @description: 
 * @Author: Islands
 * @Date: 2024-03-28 12:56:01
 * @LastEditTime: 2024-03-28 19:47:25
-->
<script lang="ts" setup>
import { ref, reactive } from "vue";
import type { FormInstance } from "element-plus";
import { Plus, Refresh, Edit } from "@element-plus/icons-vue";
defineProps({
  dialogVisible: {
    type: Boolean,
    required: true,
  },
  /**
   * 表单信息
   */
  formData: {
    type: Object,
    required: true,
  },
  /**
   * 宽度
   */
  width: {
    type: String || Number,
    default: 750,
  },
});
/**
 * 回调方法
 */
const emit = defineEmits<{
  (e: "handleClose"): void;
  (e: "submitChange", data: any): void;
}>();
//dom操作id
const formRef = ref<FormInstance>();
//提交动画
const loading = ref<boolean>(false);
const handleClose = () => {
  formRef.value?.resetFields();
  formRef.value?.clearValidate();
  loading.value = false;
  emit("handleClose");
};

/**
 * 提交方法
 */
const submitChange = (_formRef: FormInstance | undefined, _data: any) => {
  if (!_formRef) return;
  _formRef.validate((flag: boolean) => {
    if (!flag) return;
    loading.value = true;
    try {
      //执行回调
      emit("submitChange", _data);
    } catch (error) {
    } finally {
      loading.value = false;
    }
  });
};
</script>
<template>
  <el-dialog
    :modelValue="dialogVisible"
    title="XX新增"
    append-to-body
    draggable
    :width="width"
    :before-close="handleClose"
    class="dialog-xs"
  >
    <div class="content">
      <el-form ref="formRef" :model="formData" label-width="80px">
        <slot :row="formData" />
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button :icon="Refresh" @click="handleClose">
          {{ $t(`button.cancel`) }}
        </el-button>
        <el-button
          :icon="Refresh"
          :loading="loading"
          type="primary"
          @click="submitChange(formRef, formData)"
        >
          {{ $t(`button.confirm`) }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<style lang="scss" scoped>
.content {
  padding: 10px 40px 5px 10px;
}
</style>
